<template>
  <div class="wrap">
    <el-steps style="width: 80%;margin-left: 22%;margin-bottom: 15px" space="30%" :active="3"
              finish-status="success">
      <el-step title="已结算"></el-step>
      <el-step title="已支付"></el-step>
      <el-step title="已完成"></el-step>
    </el-steps>
    <div class="table-main">
      <el-button type="primary" size="mini" @click="clearFilter" icon="el-icon-delete">清除所有过滤器</el-button>
      <div class="select">
        <el-input maxlength="11" style="width: 180px;margin-left: 20px" placeholder="请输入手机号" type="text"
                  size="small"
                  v-model.trim="selectPhone" @keyup.enter.native="getOrderByPhone"/>
        <el-button type="primary" size="mini" @click="getOrderByPhone" icon="el-icon-search">查询</el-button>
      </div>


      <el-table
          size="small"
          ref="filterTable"
          :data="tableData">
        <el-table-column
            prop="time"
            label="订单日期"
            sortable
            width="260"
            column-key="date"
            :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
            :filter-method="filterHandler"
        >
        </el-table-column>
        <el-table-column
            prop="area"
            label="区域"
            width="140">
        </el-table-column>
        <el-table-column prop="reservation" label="预约时间" width="150">

        </el-table-column>
        <el-table-column
            prop="isMember"
            label="会员"
            width="160"
            :filters="[{ text: '是', value: '是' }, { text: '否', value: '否' }]"
            :filter-method="memberTag">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.isMember === '是' ? 'success' : 'info'"
                disable-transitions>{{ scope.row.isMember }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="phone"
            label="消费手机号"
            width="200">
        </el-table-column>

        <el-table-column
            prop="price"
            label="消费价格(￥元)"
            width="180">
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="current"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getOrdersByPage, getOrderByPhone} from "@/utils/apis/order";
import filter from "@/utils/filter";

export default {
  name: "OrderList",
  data() {
    return {
      current: 1,
      total: 0,
      selectPhone: '',
      tableData: []
    }
  },
  created() {
    const loading = this.$loading({
      lock: true,
      text: '更新数据.......',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    this.handleCurrentChange(1)
    loading.close()
  },
  methods: {
    //更新表格数据
    updateFormData(val) {
      const data = val.data.data
      this.total = data.total
      this.tableData = data.records
      this.tableData.forEach(item => {
        item.time = filter.formatDate(item.time, 'yyyy-M-d H:m:s')
        if (item.isMember == 0) {
          item.isMember = '否'
        } else {
          item.isMember = '是'
        }
      })
    },
    async handleCurrentChange(val) {
      this.current = val
      const res = await getOrdersByPage(this.current, 10)
      this.updateFormData(res)
    },
    //根据手机号查询订单
    getOrderByPhone() {
      this.current = 1
      getOrderByPhone(this.current, 10, this.selectPhone).then(res => {
        if (res.data.code === 200) {
          this.$message.success('查询成功')
          this.updateFormData(res)
        }
      })
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
      this.handleCurrentChange(1)
      this.selectPhone = ''
    },
    //是否会员的标签
    memberTag(value, row) {
      return row.isMember === value
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    //跳转未支付
    goLeftUnsettled() {
      this.$router.push('/unsettled')
    },

  }
}
</script>

<style scoped>

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.table-main {
  width: 960px;
}

.select {
  width: 264px;
  float: right;
  display: flex;
  justify-content: space-between;
}

.block {
  padding-top: 30px;
  margin-right: 70px;
}
</style>